package com.hgm.study.ui.screens


import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Password
import androidx.compose.material.icons.filled.Person
import androidx.compose.material.icons.filled.Visibility
import androidx.compose.material.icons.filled.VisibilityOff
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.hgm.study.R
import com.hgm.study.compositionLocal.LocalUserViewModel
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

@Composable
fun LoginScreen(
      onClose: () -> Unit
) {

      //获取屏幕宽度
      val screenWidth: Float
      val screenHeight: Float
      with(LocalDensity.current) {
            screenWidth = LocalConfiguration.current.screenWidthDp.dp.toPx()
            screenHeight = LocalConfiguration.current.screenHeightDp.dp.toPx()
      }
      //进度条
      var showPassword by remember {
            mutableStateOf(false)
      }
      //获取viewModel
      val userViewModel = LocalUserViewModel.current
      //协程作用域
      val coroutineScope = rememberCoroutineScope()


      Box(modifier = Modifier.fillMaxSize()) {
            //背景图片
            Image(
                  painter = painterResource(id = R.drawable.a),
                  contentDescription = null,
                  modifier = Modifier.fillMaxSize(),
                  contentScale = ContentScale.Crop
            )

            //上渐变
            Box(
                  modifier = Modifier
                        .fillMaxSize()
                        .background(
                              Brush.linearGradient(
                                    listOf(Color(0xFFCA5B5B), Color.Transparent),
                                    start = Offset(x = screenWidth, y = 0f),
                                    end = Offset(x = 0f, y = screenHeight)
                              )
                        )
            )

            //下渐变
            Box(
                  modifier = Modifier
                        .fillMaxSize()
                        .background(
                              Brush.linearGradient(
                                    listOf(Color(0xFF3947C4), Color.Transparent),
                                    start = Offset(x = 0f, y = screenHeight),
                                    end = Offset(x = screenWidth, y = 0f)
                              )
                        )
            )


            Column(
                  modifier = Modifier.fillMaxSize(),
            ) {
                  Column(
                        modifier = Modifier
                              .fillMaxSize()
                              .weight(0.4f),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Center
                  ) {
                        Text(
                              text = "用户登录",
                              color = Color.White,
                              fontSize = 38.sp,
                              fontWeight = FontWeight.Bold,
                        )
                  }


                  Column(
                        modifier = Modifier
                              .fillMaxSize()
                              .weight(0.6f),
                        horizontalAlignment = Alignment.CenterHorizontally,
                  ) {
                        TextField(
                              value = userViewModel.userName,
                              onValueChange = { userViewModel.userName = it },
                              singleLine = true,
                              leadingIcon = {
                                    Icon(
                                          imageVector = Icons.Default.Person,
                                          contentDescription = null,
                                          tint = Color.White
                                    )
                              },
                              label = { Text(text = "用户名", color = Color.Gray) },
                              colors = TextFieldDefaults.textFieldColors(
                                    backgroundColor = Color.Transparent,
                                    focusedIndicatorColor = Color.LightGray,
                                    focusedLabelColor = Color.LightGray,
                                    unfocusedIndicatorColor = Color.LightGray,
                                    unfocusedLabelColor = Color.LightGray,
                                    cursorColor = Color.White
                              ),
                              modifier = Modifier.padding(
                                    start = 32.dp,
                                    end = 32.dp,
                                    bottom = 24.dp
                              ),
                              enabled = !userViewModel.loading
                        )



                        TextField(
                              value = userViewModel.password,
                              onValueChange = { userViewModel.password = it },
                              singleLine = true,
                              leadingIcon = {
                                    Icon(
                                          imageVector = Icons.Default.Password,
                                          contentDescription = null,
                                          tint = Color.White
                                    )
                              },
                              trailingIcon = {
                                    Icon(
                                          imageVector = if (showPassword) Icons.Default.Visibility else Icons.Default.VisibilityOff,
                                          contentDescription = null,
                                          modifier = Modifier.clickable {
                                                showPassword = !showPassword
                                          },
                                          tint = Color.White
                                    )
                              },
                              visualTransformation = if (showPassword) VisualTransformation.None else PasswordVisualTransformation(),
                              label = { Text(text = "密码", color = Color.Gray) },
                              colors = TextFieldDefaults.textFieldColors(
                                    backgroundColor = Color.Transparent,
                                    focusedIndicatorColor = Color.LightGray,
                                    focusedLabelColor = Color.LightGray,
                                    unfocusedIndicatorColor = Color.LightGray,
                                    unfocusedLabelColor = Color.LightGray,
                                    cursorColor = Color.White
                              ),
                              modifier = Modifier.padding(
                                    start = 32.dp,
                                    end = 32.dp,
                                    bottom = 24.dp
                              ),
                              enabled = !userViewModel.loading
                        )


                        Spacer(modifier = Modifier.height(8.dp))
                        TextButton(
                              onClick = {
                                    coroutineScope.launch {
                                          userViewModel.login(onClose = onClose)
                                    }
                              },
                              enabled = !userViewModel.loading
                        ) {
                              Text(
                                    text = "登录",
                                    color = Color.White,
                                    fontSize = 20.sp
                              )
                              if (userViewModel.loading) {
                                    CircularProgressIndicator()
                              }
                        }

                        Spacer(modifier = Modifier.height(8.dp))
                        Text(text = userViewModel.error)

                        TextButton(onClick = { /*TODO*/ }) {
                              Text(
                                    text = "还没有账号？点击进入注册",
                                    color = Color.Gray,
                                    fontSize = 14.sp
                              )
                        }
                  }
            }
      }


}
